.chart-wrapper {
    overflow: auto;
    &.horizontal {
        height: 100%;
    }
    &.vertical {
        height: 100%;
        .org-chart {
            margin: 0 auto;
        }
    }
}
.vertical {
   .inner-content-title-current,
    .inner-content-title-total{
    padding: 0!important;
    }
}
.clearfix() {
    *zoom: 1;
    &:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        overflow: hidden;
    }
}

@line-border: 1px solid #ccc;
@node-border: 1px solid #1ab394;
@node-bg: #1ab394;
@node-color: #fff;
@btn-border: 1px solid #ccc;
@sub-color: #a3e1d4;

.org-chart-container.sg-chart {
    .userList{
        display: flex;
        border-radius: 4px;
        border: 1px solid #ccc;
        background-color: white;
        padding: 8px;
        align-items: center;
        .item{    width: 65px;
            &:first-child{
                margin: 0;
            }
            margin-left: 20px;
            img{
                height: 30px;
                width: 30px;
                border-radius: 50%;
            }
            p{
                padding-top: 6px;
                text-align: center;
                font-size: 14px;
                color: #333;
                margin: 0;
            }
        }
        .more{
            margin-left: 20px;
            font-size: 14px;
            color: #333;
        }
    }
    display: inline-block;
    padding: 15px;
    background-color: #fff;
    width: 100%;
    .org-chart {
        display: table;
        text-align: center;
        &:before,
        &:after {
            content: '';
            display: table;
        }
        &:after {
            clear: both;
        }
    }
    .org-chart-node,
    .org-chart-node-children {
        position: relative;
        margin: 0;
        padding: 0;
        list-style-type: none;
        &:before,
        &:after {
            transition: all 0.35s;
        }
    }
    .org-chart-node-label {
        position: relative;
        display: inline-block;
        outline: none;
        cursor: pointer;
        .org-chart-node-label-inner {
            word-break: keep-all; // padding: 6px 10px;
            text-align: center; // border-radius: 4px; // border: @node-border; // font-size: 12px;
            outline: none; // background-color: @node-bg;
            // color: @node-color;
        }
    }
    .org-chart-node-btn {
        position: absolute;
        top: 100%;
        left: 50%;
        width: 20px;
        height: 20px;
        z-index: 10;
        margin-left: -9px;
        margin-top: 9px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        border: @btn-border;
        cursor: pointer;
        transition: all 0.35s ease;
        &:hover {
            transform: scale(1.1);
        }
        &:before,
        &:after {
            content: '';
            position: absolute;
        }
        &:before {
            top: 50%;
            left: 4px;
            right: 4px;
            height: 0;
            border-top: @btn-border;
        }
        &:after {
            top: 4px;
            left: 50%;
            bottom: 4px;
            width: 0;
            border-left: @btn-border;
        }
        &.expanded:after {
            border: none;
        }
    }
    .org-chart-node {
        padding-top: 20px;
        display: table-cell;
        vertical-align: top;
        &.is-leaf,
        &.collapsed {
            padding-left: 10px;
            padding-right: 10px;
        }
        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 19px;
        }
        &:after {
            left: 50%;
            border-left: @line-border;
        }
        &:not(:first-child):before,
        &:not(:last-child):after {
            border-top: @line-border;
        }
    }
    .org-chart {
        .org-chart-node-warp {
            &>.org-chart-node {
                &:after {
                    border-left: none;
                    border-top: none;
                }
            }
        }
    }
    .collapsable .org-chart-node.collapsed {
        padding-bottom: 30px;
        .org-chart-node-label:after {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 50%;
            height: 20px;
            border-right: @line-border;
        }
    }
    .org-chart>.org-chart-node {
        padding-top: 0;
        &:after {
            border-left: 0;
        }
    }
    .org-chart-node-children {
        padding-top: 20px;
        display: table;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 0;
            height: 20px;
            border-left: @line-border;
        }
        &:after {
            content: '';
            display: table;
            clear: both;
        }
    }
    .horizontal {
        .org-chart-node {
            display: table-cell;
            float: none;
            padding-top: 0;
            padding-left: 20px;
            &.is-leaf,
            &.collapsed {
                padding-top: 10px;
                padding-bottom: 10px;
            }
            &:before,
            &:after {
                width: 19px;
                height: 50%;
            }
            &:after {
                top: 50%;
                left: 0;
                border-left: 0;
            }
            &:only-child:before {
                top: 1px;
                border-bottom: @line-border;
            }
            &:not(:first-child):before,
            &:not(:last-child):after {
                border-top: 0;
                border-left: @line-border;
            }
            &:not(:only-child):after {
                border-top: @line-border;
            }
            .org-chart-node-inner {
                display: table;
            }
        }
        .org-chart-node-warp {
            &>.org-chart-node {
                &:only-child:before,
                &:after {
                    border: none;
                }
            }
        }
        .org-chart-node-label {
            display: table-cell;
            vertical-align: middle;
        }
        &.collapsable .org-chart-node.collapsed {
            padding-right: 30px;
            .org-chart-node-label:after {
                top: 0;
                left: 100%;
                width: 20px;
                height: 50%;
                border-right: 0;
                border-bottom: @line-border;
            }
        }
        .org-chart-node-btn {
            top: 50%;
            left: 100%;
            margin-top: -11px;
            margin-left: 9px;
        }
        &>.org-chart-node:only-child:before {
            border-bottom: 0;
        }
        .org-chart-node-children {
            display: table-cell;
            padding-top: 0;
            padding-left: 20px;
            &:before {
                top: 50%;
                left: 0;
                width: 20px;
                height: 0;
                border-left: 0;
                border-top: @line-border;
            }
            &:after {
                display: none;
            }
            &>.org-chart-node {
                display: block;
            }
        }
    }
    .org-chart-node-label-inner {
        .inner-content {
            font-size: 12px;
            &-title {
                height: 20px;
                line-height: 20px;
                background-color: @node-bg;
                color: @node-color;
                border: @node-border;
                border-bottom: none;
                border-radius: 4px 4px 0 0;
                .clearfix();
                &-current,
                &-total {
                    float: left;
                    width: 50%;
                    height: 100%;
                    text-align: left;
                }
                &-current {
                    padding-left: 5px;
                }
                &-total {
                    padding-right: 5px;
                    text-align: right;
                    background: @sub-color;
                    color: #fff;
                    border-radius: 0 4px 0 0;
                }
            }
            &-text {
                font-size: 14px;
                min-width: 3em;
                padding: 4px 16px 4px 16px;
                border: @node-border;
                border-radius: 0 0 4px 4px;
                border-top: none;
                &-full {
                    font-size: 12px;
                    padding: 6px 12px;
                    background-color: @node-bg;
                    color: @node-color;
                }
            }
            &.vertical {
                word-break: break-all;
                width: 3.5em;
                .inner-content-title {
                    max-height: 40px;
                    min-height: 24px;
                    line-height: 24px;
                    &-current,
                    &-total {
                       text-align: center;
                        padding-left: 3px;
                        width: 100%;
                        height: 22px;
                    }
                    &-total {
                        border-radius: 0;
                    }
                }
                .inner-content-text {
                    text-align: center;
                    margin: 0 auto;
                    padding: 26px 16px 4px 14px;
                }
            }
        }
    }
}